<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../static/libs/css/layer.css">
<link rel="stylesheet" href="../static/libs/css/login/register.css">
<link rel="stylesheet" href="../static/libs/css/login/resets.css">
<link rel="stylesheet" href="../static/libs/css/login/userCommon.css">
<link rel="stylesheet" href="../static/libs/css/login/bootstrap.css">
<style>
    .alert {
        position: absolute;
        width: 100%;
        text-align: center;
        display: none;
        z-index: 2;
    }
</style>

<body>
    <div class="alert alert-success" id="register_tip">这是一个提示</div>
    <header class="header-box">
        <div class="container">
            <a class="logo" href="#"></a>
        </div>
        <div class="bg"></div>
    </header>
    <section class="container">
        <aside class="register-box">
            <div class="register-title">
                <span class="name">注册</span>
                <div class="right-text">已是会员，去<a href="./login.html"> 登录&gt;</a></div>
            </div>

            <ul class="from-group-ul">
                <li class="list">
                    <div class="from-div-list ok" style="">
                        <label class="label-text">用户名</label>
                        <input class="input-text" placeholder="请输入用户名..." id="username" type="text">
                    </div>

                </li>
                <li class="list name">
                    <div class="from-div-list ok" style="">
                        <label class="label-text">昵称</label>
                        <input class="input-text" placeholder="请输入昵称..." id="nickname" type="text">

                    </div>
                </li>
                <li class="list">
                    <div class="from-div-list" style="">
                        <label class="label-text">设置密码</label>
                        <input class="input-text" placeholder="请输入密码..." maxlength="20" id="pwd" type="password">
                    </div>
                </li>
                <li class="list ok">
                    <div class="from-div-list" style="">
                        <label class="label-text">确认密码</label>
                        <input class="input-text" placeholder="请再次输入密码..." id="rwd" maxlength="20" type="password">
                </li>
            </ul>
            <a class="user-default-btn" id="btn">立即注册</a>
        </aside>
    </section>
    <footer class="footer-box">
        <div class="container">
            <p>罗技官方商城由罗技（中国）科技有限公司授权双齐国际贸易（上海）有限公司负责经营 2021 , all rights reserved</p>
            <p>
                <a href="./logitech.html" target="_blank">罗技官方网站</a>
                <a href="#" target="_blank">联系方式</a>
                <a href="#" target="_blank">隐私声明</a>
                <a href="#" target="_blank">用户服务协议</a>
                <a href="#" target="_blank">沪ICP备12002604号-1</a>
            </p>
        </div>
    </footer>
    <script>
        var btn = document.getElementById("btn")
        var username = document.getElementById("username")
        var password = document.getElementById("pwd")
        var nickname = document.getElementById("nickname")
        var rpassword = document.getElementById("rwd")
        btn.onclick = async function() {
            let url = "http://127.0.0.1:8888/users/register";
            let options = {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: `username=${username.value}&password=${password.value}&rpassword=${rpassword.value}&nickname=${nickname.value}`
            };
            let response = await fetch(url, options);
            let data = await response.json();
            console.log(data);
            var register_tip = document.getElementById("register_tip");
            // 注册结束之后我们应该跳转到登录页面; 
            if (data.code === 1) {
                successTip(data.message);
                setTimeout(function() {
                    location.href = "./login.html";
                }, 2000)
            } else {
                errorTip(data.message);
            }
        }

        function errorTip(msg) {
            register_tip.style.display = "block";
            register_tip.classList.remove("alert-success");
            register_tip.classList.add("alert-danger");

            register_tip.innerHTML = msg;

            setTimeout(function() {
                register_tip.style.display = "none";
            }, 2000)
        }

        function successTip(msg) {
            register_tip.classList.remove("alert-danger");
            register_tip.classList.add("alert-success");
            register_tip.style.display = "block";
            register_tip.innerHTML = msg;

            setTimeout(function() {
                register_tip.style.display = "none";
            }, 2000)
        }
    </script>


</body>

</html>